<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui" 
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
 
            <p:dataGrid var="neg" value="#{cNeg.vListaNegocios}" columns="3"   
                rows="6" paginator="true"  
                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                rowsPerPageTemplate="5,10,15">  
                
                <f:facet name="header">  
                    Negocios
                </f:facet>
                
                <p:panel header="#{neg.negNombre}" style="text-align:center;font-size: small">  
                    <h:panelGrid columns="1" style="text-align:center;font-size: small;width: 100%">  
                        <p:graphicImage height="130" width="330" id="nimage" value="#{cNeg.NegChartM(neg.idNegocio)}">   
                            <f:param name="idn" value="#{neg.idNegocio}" />
                        </p:graphicImage>

                        <h:outputText value="#{neg.negDescripcion}" />  

                        <p:commandLink update=":formCentro:negDetail,:formCentro:dlgInfo" oncomplete="PF('negDialog').show()" title="Ver detalle">  
                            <h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />   
                            <f:setPropertyActionListener value="#{neg}"   
                                                         target="#{cNeg.selectedNeg}" />  
                        </p:commandLink>  
                    </h:panelGrid>  
                </p:panel>  
                <f:facet name="footer">  
                    En total hay #{cNeg.vListaNegocios.size()} negocios.  
                </f:facet>
            </p:dataGrid>  

        <p:dialog header="#{cNeg.selectedNeg.negNombre}" id="dlgInfo" widgetVar="negDialog" modal="false" closeOnEscape="true" resizable="false">  
                <p:outputPanel id="negDetail" style="text-align:center;">  

                    <p:graphicImage height="260" width="660" id="nimage" value="#{cNeg.NegChartM(cNeg.selectedNeg.idNegocio)}"/>  

                    <h:panelGrid  columns="2" cellpadding="5">  
                        <h:outputLabel for="ntelefono" value="Telefono: " />  
                        <h:outputText id="ntelefono" value="#{cNeg.selectedNeg.negTelefono}" />  

                        <h:outputLabel for="npaginaweb" value="Pagina web: " />  
                        <h:outputText id="npaginaweb" value="#{cNeg.selectedNeg.negPaginaweb}" />  

                        <h:outputLabel for="nhorario" value="Horario: " />  
                        <h:outputText id="nhorario" value="#{cNeg.selectedNeg.negHorario}" />  

                        <h:outputLabel for="nemail" value="Email: " />  
                        <h:outputText id="nemail" value="#{cNeg.selectedNeg.negEmail}" />  

                        <h:outputLabel for="ndireccion" value="Direccion: " />  
                        <h:outputText id="ndireccion" value="#{cNeg.selectedNeg.negDireccion}" />  
                       
                    </h:panelGrid>  
                    <p:gmap center="#{cNeg.selectedNeg.negCoordenadas}" zoom="17" type="ROADMAP" model="#{cNeg.mapModelSelNeg(cNeg.selectedNeg.negCoordenadas)}"  
                            style="width:600px;height:400px" />
                </p:outputPanel>  
            </p:dialog> 

        
        
        
</ui:composition>